<script setup>
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'

const localePath = useLocalePath()

const colorMode = useColorMode()
const { locale, t } = useI18n()
const isMobileMenuOpen = ref(false)

// 导航链接
const navLinks = computed(() => [
  { label: t('home'), to: localePath('/') },
  { label: t('about'), to: localePath('/about') },
  { label: t('services'), to: localePath('/services') },
  { label: t('portfolio'), to: localePath('/portfolio') },
  { label: t('contact'), to: localePath('/contact') },
])

// 语言选项
const languages = [
  { code: 'en', name: 'English', flag: '🇺🇸' },
  { code: 'zh', name: '中文', flag: '🇨🇳' },
  { code: 'es', name: 'Español', flag: '🇪🇸' },
  { code: 'fr', name: 'Français', flag: '🇫🇷' },
]

// 当前语言
const currentLanguage = computed(() => {
  return languages.find(lang => lang.code === locale.value) || languages[0]
})

// // 语言切换器选项 - 使用 UDropdownMenu 的 items 结构
// const languageItems = computed(() => [
//   [
//     // 标题项
//     {
//       label: t('select_language'),
//       type: 'label',
//       disabled: true,
//     },
//   ],
//   // 语言选项
//   ...languages.map(lang => ({
//     label: lang.name,
//     flag: lang.flag,
//     click: () => {
//       locale.value = lang.code
//     },
//   })),
// ])

// 移动端语言选择器选项
const mobileLanguageOptions = computed(() =>
  languages.map(lang => ({
    value: lang.code,
    label: `${lang.flag} ${lang.name}`,
  })),
)

// 移动端选中的语言
const selectedLanguage = computed({
  get: () => locale.value,
  set: (value) => {
    locale.value = value
  },
})

// 设置语言
function setLocale(value) {
  locale.value = value
}

// 切换颜色模式
function toggleColorMode() {
  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
</script>

<template>
  <header class="sticky top-0 z-50 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- Logo 区域 -->
      <div class="flex items-center space-x-3">
        <div class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center">
          <span class="text-white font-bold text-xl">N</span>
        </div>
        <span class="text-xl font-bold text-gray-900 dark:text-white">NuxtApp</span>
      </div>

      <!-- 桌面导航菜单 -->
      <nav class="hidden md:flex space-x-8">
        <NuxtLink
          v-for="link in navLinks"
          :key="link.label"
          :to="link.to"
          class="text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-400 transition-colors"
          active-class="text-primary-500 dark:text-primary-400 font-medium"
        >
          {{ link.label }}
        </NuxtLink>
      </nav>
      <!-- 右侧功能区 -->
      <div class="flex items-center space-x-4">
        <!-- 语言切换器 - 使用 UDropdownMenu -->
        <UDropdownMenu :items="languages" :popper="{ placement: 'bottom-end' }">
          <UButton color="gray" variant="ghost" :label="currentLanguage.name" trailing-icon="i-heroicons-chevron-down-20-solid" />

          <template #item="{ item }">
            <div class="flex items-center gap-2">
              <span class="text-lg">{{ item.flag }}</span>
              <span>{{ item.name }}</span>
            </div>
          </template>
        </UDropdownMenu>

        <!-- 颜色模式切换 -->
        <UButton
          color="gray"
          variant="ghost"
          :icon="colorMode.value === 'dark' ? 'i-heroicons-sun-20-solid' : 'i-heroicons-moon-20-solid'"
          @click="toggleColorMode"
        />

        <!-- 移动端菜单按钮 -->
        <UButton
          color="gray"
          variant="ghost"
          icon="i-heroicons-bars-3-20-solid"
          class="md:hidden"
          @click="isMobileMenuOpen = true"
        />
      </div>
    </div>

    <!-- 移动端菜单抽屉 -->
    <USlideover v-model="isMobileMenuOpen" side="right" class="md:hidden">
      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
        <template #header>
          <div class="flex items-center justify-between">
            <h3 class="text-lg font-semibold">
              {{ $t('mobile_menu_title') }}
            </h3>
            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" @click="isMobileMenuOpen = false" />
          </div>
        </template>

        <div class="space-y-2">
          <NuxtLink
            v-for="link in navLinks"
            :key="link.label"
            :to="link.to"
            class="block py-3 px-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
            active-class="bg-gray-100 dark:bg-gray-800 font-medium"
            @click="isMobileMenuOpen = false"
          >
            {{ link.label }}
          </NuxtLink>

          <!-- 移动端语言切换器 -->
          <div class="px-4 py-3">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {{ $t('language') }}
            </label>
            <USelect
              v-model="selectedLanguage"
              :options="mobileLanguageOptions"
              class="w-full"
              @update:model-value="setLocale"
            />
          </div>
        </div>
      </UCard>
    </USlideover>
  </header>
</template>

<style scoped>
/* 导航链接活动状态指示器 */
.router-link-active {
  position: relative;
}

.router-link-active:after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary-500);
  border-radius: 1px;
}

.dark .router-link-active:after {
  background-color: var(--color-primary-400);
}
</style>
